@import '~@angular/material/_theming';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core();

// Custom palette for monocular.
$color-base: #3371e3;

$mat-monocular: (
  50:  #bdd1f6, // #e3f2fd,
  100: #adc6f4, // #bbdefb,
  200: #8fb1f0, // #90caf9,
  300: #709ceb, // #64b5f6,
  400: #5286e7, // #42a5f5,
  500: #3371e3, // #2196f3,
  600: #2b60c1, // #1e88e5,
  700: #244f9f, // #1976d2,
  800: #1c3e7d, // #1565c0,
  900: #142d5b, // #0d47a1,
  A100: #adc6f4, // #82b1ff,
  A200: #8fb1f0, // #448aff,
  A400: #5286e7, // #2979ff,
  A700: #244f9f, // #2962ff,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: white,
    A700: white,
  )
);

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$monocular-app-primary: mat-palette($mat-monocular);
$monocular-app-accent:  mat-palette($mat-light-blue);

// The warn palette is optional (defaults to red).
$monocular-app-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$monocular-app-theme: mat-light-theme($monocular-app-primary, $monocular-app-accent, $monocular-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($monocular-app-theme);

// Base palette for the project
$layout-dark: #333239;
$layout-base: #303030;
$layout-light: #f8f8f8;
$layout-text: #38383F;
$text-white: white;
$background-light: #EAEDEF;
$background-white: white;
$header-backgound-gradient: linear-gradient(to left, $layout-base, mat-color($monocular-app-primary, 900));
$border-color: #D7D9DD;

// Other common sizes
$border-radius: 8px;
$layout-max-width: 1280px;
$header-bar-height: 70px;

// Responsive. They represents the min width of every display.
$breakpoints: (
  small: 480px,
  medium: 840px,
  large: 1024px,
  xlarge: 1280px
);

$mappy-queries: (
  phone: mappy-bp(max-width small),
  tablet: mappy-bp(small medium),
  desktop: mappy-bp(medium xlarge),
  wide: mappy-bp(xlarge)
);

// Import the library. I need to import it after the breakpoints definition
@import '~mappy-breakpoints/mappy-breakpoints';

// Add more classes to Material2 components
mat-form-field {
  &.mat-input--full {
    width: 100%;
  }

  .mat-input-infix {
    border-top: 0;
  }

  &.mat-input--reverse {
    .mat-input-underline {
      background-color: $layout-light;
    }
    .mat-input-element {
      color: $layout-light;
    }
  }

  &:not(.mat-focused) .mat-input-placeholder {
     color: darken($layout_light, 25);
  }

  &.mat-input--big {
    font-size: 1.5em;
  }
}

@mixin placeholder {
  &::-webkit-input-placeholder {@content;}
  &:-moz-placeholder           {@content;}
  &::-moz-placeholder          {@content;}
  &:-ms-input-placeholder      {@content;}
}
